<template>
    <div class="vue-scroll-container" :style="{ height: containerHeight + 'px' }" @mouseenter="pauseScroll"
        @mouseleave="resumeScroll">
        <div ref="scrollContent" class="scroll-content" :style="{ transform: `translateY(${currentOffset}px)` }">
            <div class="scroll-list">
                <slot></slot>
            </div>
            <div v-if="shouldClone" class="scroll-list">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
//引入封装方法
import encapsulation from "../../utils/aircimGird";
export default {
    //混入封装方法
    mixins: [encapsulation],

    props: {
        containerHeight: {
            type: Number,
            required: true
        },
        speed: {
            type: Number,
            default: 40
        }
    },
    data() {
        return {
            currentOffset: 0,
            contentHeight: 0,
            shouldClone: false,
            isPaused: false,
            shouldScroll: false,
            animationFrameId: null,
            resizeObserver: null
        }
    },
    computed: {
        step() {
            return this.speed / 60
        }
    },
    mounted() {
        this.initScroll()
        this.setupResizeObserver()
    },
    beforeDestroy() {
        this.cleanup()
    },
    methods: {
        initScroll() {
            this.calculateHeight()
            if (this.shouldScroll) this.startAnimation()
        },

        calculateHeight() {
            this.$nextTick(() => {
                const contentEl = this.$refs.scrollContent
                if (!contentEl?.firstElementChild) return

                // 核心修复：正确计算是否应该滚动
                this.contentHeight = contentEl.firstElementChild.offsetHeight
                this.shouldScroll = this.contentHeight > this.containerHeight
                this.shouldClone = this.shouldScroll // 需要克隆时才显示副本

                if (!this.shouldScroll) {
                    this.currentOffset = 0
                    this.cleanup()
                }
            })
        },

        startAnimation() {
            const animate = () => {
                if (!this.isPaused && this.shouldScroll) {
                    this.currentOffset -= this.step

                    // 修复滚动重置逻辑
                    if (-this.currentOffset >= this.contentHeight) {
                        this.currentOffset = this.shouldClone ? 0 : -this.contentHeight
                    }
                }
                this.animationFrameId = requestAnimationFrame(animate)
            }
            this.animationFrameId = requestAnimationFrame(animate)
        },

        pauseScroll() {
            this.isPaused = true
        },

        resumeScroll() {
            if (this.shouldScroll) this.isPaused = false
        },

        setupResizeObserver() {
            this.resizeObserver = new ResizeObserver(() => {
                this.calculateHeight()
                this.cleanup()
                this.initScroll()
            })
            this.resizeObserver.observe(this.$refs.scrollContent)
        },

        cleanup() {
            cancelAnimationFrame(this.animationFrameId)
        }
    }
}
</script>

<style scoped>
.vue-scroll-container {
    position: relative;
    overflow: hidden;
}

.scroll-content {
    will-change: transform;
}

.scroll-list {
    transition: 0.3s;
}
</style>